<template>
    <el-tabs id="menu-tabs"
             :value="$route.name"
             type="border-card"
             @tab-click="change"
             @tab-remove="remove">
        <el-tab-pane name="index">
            <span slot="label"><i class="el-icon-home"></i> 首页</span>
        </el-tab-pane>
        <el-tab-pane  v-for="tab in $store.state.tabBar.tabs" :key="tab.name" :label="tab.title" :name="tab.name" :closable="true"/>
    </el-tabs>
</template>

<script>
    export default {
        methods: {
            // 选中修改
            change(router) {
                if (this.$route.name != router.name) {
                    this.$router.push({name: router.name});
                }
            },
            // 移除标签
            remove(key) {
                let k, prev, tabs = this.$store.state.tabBar.tabs, now = this.$route.name;
                for (k = 0; k < tabs.length; k++) {
                    if (tabs[k].name === key) {
                        if (key == now) {
                            prev = k - 1;
                            now = prev < 0 ? 'index' : tabs[prev].name;
                            this.change({name: now});
                        }
                        break;
                    }
                }
                this.$store.commit('removeTab', k);
            }
        }
    }
</script>
